<!DOCTYPE html>
<html>
<head>
<title>Thermodynamics Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  ctx.font = "20px '宋体', 'SimSun', serif";
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 1. Left Chamber (Source)
  ctx.strokeRect(50, 150, 150, 100);
  ctx.fillText('1 000 ℃', 125, 200);

  // 2. Connecting Tube and Collimator
  // Connecting tube lines
  ctx.beginPath();
  ctx.moveTo(200, 185);
  ctx.lineTo(230, 185);
  ctx.moveTo(200, 215);
  ctx.lineTo(230, 215);
  ctx.stroke();

  // Collimator slits
  ctx.beginPath();
  ctx.moveTo(240, 175);
  ctx.lineTo(240, 225);
  ctx.moveTo(250, 175);
  ctx.lineTo(250, 225);
  ctx.moveTo(260, 175);
  ctx.lineTo(260, 225);
  ctx.stroke();

  // Collimator label
  ctx.fillText('准直', 250, 250);
  ctx.fillText('狭缝', 250, 275);

  // 3. Right Chamber (Vacuum Container)
  ctx.strokeRect(270, 100, 300, 200);

  // Temperature label inside right chamber
  ctx.fillText('300 K', 350, 130);
  
  // Vertical label for vacuum container
  ctx.fillText('真', 540, 160);
  ctx.fillText('空', 540, 190);
  ctx.fillText('容', 540, 220);
  ctx.fillText('器', 540, 250);

  // 4. Atomic Beam
  ctx.beginPath();
  ctx.moveTo(260, 200);
  ctx.lineTo(400, 200);
  // Arrowhead
  ctx.moveTo(400, 200);
  ctx.lineTo(385, 192);
  ctx.moveTo(400, 200);
  ctx.lineTo(385, 208);
  ctx.stroke();
  
  // Atomic beam label
  ctx.fillText('原子束', 350, 235);

  // 5. Dimension Line
  // Vertical extension lines
  ctx.beginPath();
  ctx.moveTo(270, 300);
  ctx.lineTo(270, 350);
  ctx.moveTo(570, 300);
  ctx.lineTo(570, 350);
  ctx.stroke();

  // Horizontal line with arrowheads
  ctx.beginPath();
  ctx.moveTo(270, 340);
  ctx.lineTo(570, 340);
  // Left arrowhead
  ctx.moveTo(270, 340);
  ctx.lineTo(285, 335);
  ctx.moveTo(270, 340);
  ctx.lineTo(285, 345);
  // Right arrowhead
  ctx.moveTo(570, 340);
  ctx.lineTo(555, 335);
  ctx.moveTo(570, 340);
  ctx.lineTo(555, 345);
  ctx.stroke();
  
  // Dimension label
  ctx.fillText('1 m', 420, 328);

  // 6. Caption
  ctx.fillText('热图 3.19.1', 250, 400);

</script>
</body>
</html>